<template>
	<view class="dub">
		<view class="list-back">
			<view class="list-vip">
				<view
				  class="list-item"
				  v-for="(item, index) in moneylist"
					:key="index"
					:class="active == index ? 'active' : ''"
					@click="handleItem(item, index)"
				>
					<view class="vip-item">
						<view class="item-top">
							<image class="item-img" :src="localIconSrc('yanliao.png')"></image>
							<view class="mon">{{ item.h_pigment }}颜料</view>
						</view>
						
						<view class="money-item">
							<text class="unit">￥</text>
							<text class="money">{{ item.price }}</text>
						</view>
						<view
							class="line"
							:style="{ borderBottom: active == index ? '1px solid #eabe87' : '1px solid #f5f5f5' }"
						></view>
						<view class="discount">
							<text class="dis-text">限时优惠<text class="dis-num">{{ item.discount }}</text>折</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="btn">
				<view class="vip-btn" @tap="$u.throttle(cashRecharge, 3000)">立即开通VIP尊享会员</view>
				<view style="margin-top:40rpx;display: flex;justify-content: center;align-items: center;line-height: 20rpx;">
					<checkbox-group @change.stop="handleChange">
						<checkbox class="round red" :checked="checked" style="transform:scale(1.3)">
						</checkbox>
					</checkbox-group>
					<view style="margin-left: 10rpx;" @click="handleChange">
						同意
						<text style="color: #47ACF5;" @click.stop="toPrivacy">《用户协议》</text>
						和
						<text style="color: #47ACF5;" @click.stop="toPrivacy">《隐私政策》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCreateOrder, getWechatKey, getConfigList, payMoney } from '@/api/wallet.js'
	export default {
		// props: {
		// 	moneylist: {
		// 		type: Array
		// 	}
		// },
		data() {
			return {
				vipList: ['黄金VIP', '铂金VIP'],
				moneylist: [],
				configId: '',
				active: 0,
				checked: false
			}
		},
		onLoad() {
			this.configId = this.moneylist[0].id
		},
		onShow() {
		},
		onReady() {
			this.getList()
		},
		methods: {
			getList() {
				let data = {
					type: 0
				}
				getConfigList(data).then(res => {
					console.log('ai绘画', res)
					const { data } = res.data
					this.moneylist = data;
					this.configId = data[0].id
				})
			},
			cashRecharge() {
				if(!this.checked) {
					uni.showToast({
						title: '请先阅读并勾选用户协议',
						icon: 'none'
					});
					return
				}
				uni.showLoading({
					title:'请稍后...'
				})
				let param = {
					appid: '073820240321128890',
					package_config_id: this.configId,
					request_from_url: 'pages/memberCenter/index'
				}
				
				uni.getSystemInfoAsync({
					success: (res) => {
						console.log('res', res)
						if(res.system.includes('iOS')) {
							uni.showModal({
								// title: "提示",
								content: "由于相关规范，iOS功能暂不可用",
								confirmText: '知道了',
								showCancel: false,
								success: (res)=> {
									if (res.confirm) {
										return
									}
								},
							})
							uni.hideLoading()
							return
							
						} else {
							getCreateOrder(param).then(res => {
								console.log('res2', res);
								const {
									out_trade_no,
									jky_trade_no
								} = res.data
								let data = {
									appid: '073820240321128890',
									wx_id: 'gh_85adb5b7352f',
									out_trade_no: out_trade_no
								}
								payMoney(data)
							})
						}
					},
				})
			},
			handleItem(item, index) {
				console.log(item, 'hhhh')
				this.configId = item.id
				this.active = index
			},
			handleChange() {
				this.checked = !this.checked
			},
			// 隐私政策
			toPrivacy() {
				uni.navigateTo({
					url: '/pages/privacyPage/privacyPage'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dub {
		background: #fff;
		height: calc(100vh - (var(--status-bar-height) + 240rpx));
		border-radius: 20rpx;
		margin-top: -70rpx;
		.list-back {
			// background: #fff;
			padding-top: 20rpx;
		}
		
		.list-vip {
			display: flex;
			background: #fff;
			overflow-x: scroll;
			padding-top: 20rpx ;
			border-radius: 16rpx;
			min-height: 226rpx;
			
			.list-item {
				padding: 20rpx;
				text-align: center;
				border: 1px solid #f5f5f5;
				border-radius: 16rpx;
				margin-left: 20rpx;
			}
			
			
			.active {
				background: #fff0e7;
				border: 1px solid #eabe87;
				border-radius: 16rpx;
				// margin-right: 20rpx;
				// margin-left: 20rpx;
			}
			.vip-item {
				// text-align: center;
				// border: 1px solid #f5f5f5;
				// border-radius: 16rpx;
				// margin-left: 20rpx;
				// padding: 10rpx 40rpx 10rpx 20rpx;
				
				.item-top {
					// margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				
				.item-img {
					width: 48rpx;
					height: 48rpx;
				}
				
				.mon {
					// margin-top: 20rpx;
					font-size: #{$one-title-size};
					color: #{$one-title-color};
					white-space: nowrap;
				}
				.money-item {
					color: #eabe87;
					margin-top: 20rpx;
					.unit {
						font-size: #{$explain-size};
					}
					.money {
						font-size: 52rpx;
					}
				}
				.line {
					// border-bottom: 1px solid #f5f5f5;
					// border-bottom: 1px solid #eabe87;
					margin: 10rpx 0;
				}
				.discount {
					font-size: #{$explain-size};
					color: #{$sub-color};
					.dis-text {
						white-space: nowrap;
					}
					.dis-num {
						color: red;
					}
				}
			}
		}
		.btn {
			text-align: center;
			padding-bottom: 40rpx;
			.vip-btn {
				height: 80rpx;
				line-height: 80rpx;
				color: #9b5f16;
				font-size: #{$one-title-size};
				background-image: linear-gradient(to right, #ffc069 0%, #feebc0 100%);
				border-radius: 40rpx;
				margin: 60rpx 20rpx 20rpx 20rpx;
			}
			.round {
				font-size: #{$auxiliary-size};
				color: #{$sub-color};
			}
		}
		
	}
</style>